import { FC } from "react";
import type { FormProps } from "antd";
import { Button, Form, Input, message, Select } from "antd";
import { httpPost } from "@utils/HttpUtil";

type FieldType = {
  title?: string;
  color?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  var resData = httpPost("/knowledge/submitKnowledge", values).data;
  if(resData.status){
    message.success("新增知识点成功");
  }else{
    message.error(resData.msg);
  }
  
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
  message.error("新增知识点失败"+errorInfo);
};

const onChange = (value: string) => {
    console.log(value);
};
  
const onSearch = (value: string) => {
    console.log(value);
};

const SubmitKnowledge: FC = () => {


  return (
    <>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 40 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="知识点"
          name="title"
          rules={[{ required: true, message: "请输入知识点!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="显示颜色"
          name="color"
          rules={[{ required: true, message: "请选择知识点颜色!" }]}
        >
          <Select
            showSearch
            placeholder="请选择知识点颜色"
            optionFilterProp="label"
            onChange={onChange}
            onSearch={onSearch}
            options={[
              { value: "magenta", label: "品红色" },
              { value: "red", label: "红色" },
              { value: "volcano", label: "火山色" },
              { value: "orange", label: "橘色" },
              { value: "gold", label: "金色" },
              { value: "lime", label: "柠檬色" },
              { value: "green", label: "绿色" },
              { value: "cyan", label: "青色" },
              { value: "blue", label: "蓝色" },
              { value: "geekblue", label: "极客蓝" },
              { value: "purple", label: "紫色" },
              { value: "#f50", label: "鲜红" },
              { value: "#2db7f5", label: "天蓝" },
              { value: "#87d068", label: "草绿色" },
              { value: "#108ee9", label: "海蓝色" },
            ]}
          />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            新增知识点
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default SubmitKnowledge;
